<template>
	<div class="container">
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>修改邮箱</template>
            <template #right><i class="icon iconfont icon-wode" @click="$router.push({path: '/me'})"></i></template>
        </TmallNavBar>

		<van-form @submit="handleSave">
            <van-field
                v-model="formData.email"
                name="邮箱"
                placeholder="请输入邮箱"
                maxlength="30"
                :rules="[{ validator, message: '请输入正确格式的邮箱' }]"
            />

            <!-- 保存按钮 -->
            <div style="margin: 16px">
                <van-button
                    type="primary"
                    native-type="submit"
                    round
                    block
                    color="#27BA9B"
                >
                    保&nbsp;&nbsp;存
                </van-button>
            </div>
		</van-form>
	</div>
</template>

<script setup>
import { reactive } from "vue"
import { showSuccessToast } from 'vant'
import { useUserStore } from '@/store/modules/user'

// 用户存储
const userStore = useUserStore()

// 邮箱验证
const validator = (value) => /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)

// 表单数据
const formData = reactive({
	email: userStore.profile.user.email
})

// 保存数据
const handleSave = async () => {
    await userStore.modifyEmail(formData)
    showSuccessToast('修改成功')
}
</script>

<style lang="scss">
.container {
    height: 100vh;
    background-color: ghostwhite;
	margin-top: 45px;
	padding: 5px;
	font-size: 14px;
	line-height: 24px;
	button {
		background: #27BA9B;
	}
}
</style>
